<script setup>
import { ref } from "vue";
import { useStoreIndex } from "../stores/useStore";
// import { useCounterStore } from "../stores/counter";
// import { storeToRefs } from "pinia";
defineProps({
  msg: String,
});
const store = useStoreIndex();
const { name, age } = store;
const newage = store.increment();
const newsage = store.doubleAge;
console.log("====================================");
console.log(store);
console.log("====================================");
// const counter = useCounterStore();
// const { count } = storeToRefs(counter);
// const { increment } = counter;
</script>

<template>
  <h1>{{ msg }}</h1>
  <h1>{{ name }}</h1>
  <h1>{{ age }}</h1>
  <h1>{{ newage }}</h1>
  <h1>{{ newsage }}</h1>
  <div class="card">
    <!-- <button type="button" @click="increment()">count is {{ count }}</button> -->
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
